<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom id="top" :isBack="true"  :backColor="'text-black'">
					<block slot="backText">
						<view class="text-black ">
							我的优惠券
						</view>
					</block>
				</cu-custom>
				<!-- <view class="flex justify-between padding bg-white">
					<input type="text" :value="value" placeholder="请输入券码兑换优惠券" class="couIno radius solid" />
					<view class="cu-tag bg-black radius">兑换</view>
				</view> -->
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
							v-for="(item,index) in ['未使用','已使用','已过期','领取优惠券']" :key="index" @click="tabSelect"
							:data-id="index">
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="padding-tb padding-lr-sm" v-if="TabCur<3?true:false">
				<view v-for="(item,index) in dataList" :key="index"
					class="flex justify-between pouItem padding-sm margin-bottom-sm"
					style="overflow: hidden;position: relative;">
					<view style="width: 220rpx;">
						<view class="text-sm text-gray">{{TabCur==0?'有效':''}}{{TabCur==1?'已用':''}}{{TabCur==2?'失效':''}}</view>
						<view class="text-black text-bold text-lg text-center margin-tb-sm">{{item.name}}</view>
						<view class="text-center text-sm text-gray" v-if="item.type==0">满{{item.number}}减{{item.number_reduce}}</view>
						<view class="text-center text-sm text-gray" v-else>满{{item.number}}打{{item.number_reduce}}折</view>
					</view>
					<view class="text-sm text-gray" style="width: 370rpx;">
						<view class="margin-top-sm">[{{item.type==0?'满减券':''}}{{item.type==1?'折扣券':''}}] {{item.storeName==null?'全平台通用':''}} <text v-if="item.storeName">【仅限<text class="text-yellow">{{item.storeName}}</text>使用】</text></view>
						<view class="margin-tb-xs">{{item.time}} 领取</view>
						<view>有效期： {{item.expiration_time}}</view>
					</view>
					<view
						style="width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #f1f1f1;position: absolute;top: -15rpx;left: 260rpx;">
					</view>
					<view
						style="border: 1px dashed #f1f1f1;height: 100%;width: 1px;position: absolute;left: 273rpx;top: 0;">
					</view>
					<view
						style="width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #f1f1f1;position: absolute;bottom: -15rpx;left: 260rpx;">
					</view>
				</view>
			</view>
			<view class="padding-tb padding-lr-sm" v-if="TabCur==3">
				<view v-for="(item,index) in dataList" :key="index"
					class="flex justify-between pouItem padding-sm margin-bottom-sm"
					style="overflow: hidden;position: relative;">
					<view style="">
						<view class="text-bold">{{item.name}}</view>
						<view class="text-sm text-grey margin-top-sm" v-if="item.storeName">仅限<text class="text-yellow">[{{item.storeName}}]</text>使用</view>
						<view class="text-sm text-grey margin-top-sm" v-if="item.remark">领取后{{item.remark}}天到期</view>
						<view class="text-sm text-grey margin-top-sm" v-else>{{item.start_date.split(' ')[0]}}到{{item.effective_date.split(' ')[0]}}有效</view>
					</view>
					<view class="text-sm text-gray text-right" style="">
						<view class="text-bold" v-if="item.type==0">满{{item.number}}减{{item.number_reduce}}</view>
						<view class="text-bold" v-else>满{{item.number}}打{{item.number_reduce}}折</view>
						<view class="cu-btn  round" :class="{'bg-gray':item.get_status==1,'bg-black':item.get_status==0}"  @click="receiveCoupon(item.id,index)">{{item.get_status==1?'已领取':'立即领取'}}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				value: '',
				dataList: [],

				TabCur: 0,
				scrollLeft: 0
			};
		},
		onLoad(option) {
			if(option.tabcur){
				this.TabCur=option.tabcur
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.api.getCouponList({
					select: this.TabCur < 3 ? this.TabCur + 1 : 0,
					userId: this.vuex_user.id,
					page:pageNo,
					number:pageSize,
					city:this.vuex_city
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
			//领取优惠券
			receiveCoupon(id,index){
				this.$u.api.receiveCoupon({
					couponId: id,
					userId: this.vuex_user.id
				}).then(res => {
					this.dataList[index].get_status=1
					this.$textToast(res.message)
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.$refs.paging.reload()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pouItem {
		background-color: #fff;
		border-radius: 10rpx;
	}

	.couIno {
		height: 50rpx;
		width: 560rpx;
		text-align: center;
		border: 1px solid #b8b8b8;
	}
</style>
